<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YUI panel</title>

<!-- tsm -->
  <link rel="stylesheet" type="text/css" href="../../../main/webapp/css/style.css">
	<script src="../../../main/webapp/javascript/prototype.js"></script>


<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/container/assets/container.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Animation (only required if enabling Animation) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/animation/animation-min.js"></script>

<!-- OPTIONAL: Drag & Drop (only required if enabling Drag & Drop) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script>

<style>

	.helpbox {
	background-color: white;
	width: 250px;
	border: thin solid #e0e0e0;
	}
	.helpbox ul {
	margin-left:10px;
	padding-left:10px;
	margin-top:.2em;
	}
	.helpbox  li {
	margin-left:5px;
	padding-left:5px;
	}	 
	.yui-panel .hd {
	border-bottom: 1px solid #e0e0e0;
	padding: 3px 0 3px 24px;
	margin: .2em;
	color: black;
	font-size: 16px;
	font-style: italic;
	background-color: white;
	background:  url(../images/22xhelp.gif) no-repeat;
	}
	.yui-panel .container-close { 
	margin: 3px;
	}

</style>

<script>
function init() {
	setHelpPanel('help_when', 'link_help_when');
	setHelpPanel('help_what', 'link_help_what');
}

function setHelpPanel(panelContent, linkContext) {
	var panel;
	panel = new YAHOO.widget.Panel(panelContent, { 
		width:"250px", 
		visible:false, 
		context:[linkContext,"tl","br"],
		effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
		constraintoviewport:true 
	});
	panel.render(document.body);
	YAHOO.util.Event.addListener(linkContext, "click", panel.show, panel, true);
	return panel;
}


YAHOO.util.Event.addListener(window, "load", init);

</script>
</head>

<body >

When e.g., 1962; Oct 14,1066; 1880-1886 <a href="#" id="link_help_when" >hint</a><br/>
What e.g., Battle <a href="#" id="link_help_what" class="helplink">hint</a><br/>

<div id="ctx">sdfs fdsdf sd fsdf sdf sdf sdf sdf</div>



<div id="help_when" class="helpbox">
	<div class="hd">Time Ranges</div>
	<div class="bd">
    Examples of valid time ranges are:
    <ul>
      <li>1992</li>
      <li>430 BC</li>
      <li>2000-2006</li>
      <li>Feb 1884 - Jan 1886</li>
      <li>June 22, 1992 12am - June 30, 1992</li>
      <li>October 1992</li>
      <li>Oct 12, 1992, 12:23:05 am</li>
    </ul>
  </div>
	<div class="ft"></div>
</div>

<div id="help_what" class="helpbox">
	<div class="hd">Search Terms</div>
	<div class="bd">
    Examples of valid search terms:
    <ul>
      <li>Exact match: "Battle of Gettysburg"</li>
    </ul>
  </div>
	<div class="ft"></div>
</div>


</body>
</html>
